import services from '@/services/game';
import { GamePointRank } from '@/services/game/GameController';
import { CrownOutlined, MoonOutlined, StarOutlined } from '@ant-design/icons';
import { Card, Flex, Table, Tag, Typography } from 'antd';
import React, { PropsWithChildren } from 'react';
import GameTeamPKView from './GameTeamPKView';
const { queryGamePointRank } = services.GameController;
/**
 * 赛事信息-积分排名
 */

interface Props {
  gameId: string;
}

const GamePointsRank: React.FC<PropsWithChildren<Props>> = (props) => {
  const { gameId } = props;
  //积分排名数据
  const [points, setPoints] = React.useState<GamePointRank[]>([]);
  const [selectTeam,setSelectTeam] = React.useState<GamePointRank>()
  const [pkVisible,setPKVisible] = React.useState<boolean>(false)

  React.useEffect(() => {
    //获取积分排名
    queryGamePointRank(gameId).then((res) => {
      setPoints(res.data ?? []);
    });
  }, [gameId]);

  //积分排名
  const columnsPoints = [
    {
      title: '排名',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => {
        if (record.rankIndex <= 3) {
          return (
            <Tag
              bordered={false}
              color={
                record.rankIndex == 1
                  ? 'error'
                  : record.rankIndex == 2
                  ? 'warning'
                  : 'cyan'
              }
              icon={
                record.rankIndex == 1 ? (
                  <CrownOutlined />
                ) : record.rankIndex == 2 ? (
                  <MoonOutlined />
                ) : (
                  <StarOutlined />
                )
              }
              style={{ fontSize: 16, fontWeight: 'bold'}}
            >
              {record.rankIndex}
            </Tag>
          );
        }
        return <Typography.Text strong>{record.rankIndex}</Typography.Text>;
      },
    },
    {
      title: '队伍',
      children: [
        {
          title: '队员1',
          align: 'center',
          width: 85,
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>
                {record.team.teamPerson.playerName}
              </Typography.Text>
              <Typography.Text type="secondary">
                {record.team.teamPerson.playerPhonse}
              </Typography.Text>
            </Flex>
          ),
        },
        {
          title: '队员2',
          align: 'center',
          width: 85,
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>
                {record.team.teamPerson2.playerName}
              </Typography.Text>
              <Typography.Text type="secondary">
                {record.team.teamPerson2.playerPhonse}
              </Typography.Text>
            </Flex>
          ),
        },
      ],
    },
    {
      title: '积分',
      dataIndex: 'teamPoints',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => (
        <Typography.Text strong>{record.teamPoints}</Typography.Text>
      ),
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => {
        return (
          <Tag
            bordered={false}
            color={
              record.state <= 1
                ? 'success'
                : record.state <= 2
                ? 'error'
                : 'default'
            }
            style={{ fontSize: 16, fontWeight: 'bold' }}
          >
            {record.state === 1
              ? '比赛中'
              : record.state === 2
              ? '已晋级'
              : '淘汰'}
          </Tag>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'gender',
      key: 'gender',
      width: 90,
      fixed: 'right',
      render: (_: any, record: any) => <a onClick={() => {
        setSelectTeam(record)
        setPKVisible(true)
      }}>详情</a>,
    },
  ];
  return (
    <Card title="积分排名">
      <Table
        columns={columnsPoints}
        dataSource={points}
        bordered
        size="small"
        pagination={{
          pageSize: 100,
          hideOnSinglePage: true,
        }}
      />
      <GameTeamPKView team={selectTeam} gameId={gameId} modalVisible={pkVisible} onCancel={setPKVisible} />
    </Card>
  );
};
export default GamePointsRank;
